<template>
    <div class="order-cost-form">
        <div style="margin: 20px;">
            <el-form ref="form" :rules="rules" :model="form" label-width="150px">
                <el-form-item label="跟进方式" prop="followType">
                    <el-select v-model="form.followType" placeholder="请选择跟进方式">
                        <el-option
                            v-for="(item,index) in followTypeList"
                            :key="index"
                            :label="item.sysValueName"
                            :value="item.id"
                        ></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="拜访时间" prop="visitTime">
                    <div style="width: 400px;">
                        <el-date-picker
                            v-model="form.visitTime"
                            type="date"
                            disabled
                            placeholder="选择日期">
                        </el-date-picker>
                    </div>
                </el-form-item>
                <el-form-item label="跟进内容" prop="followContent">
                    <div style="width: 400px;">
                        <el-input type="textarea" :rows="5" v-model="form.followContent"></el-input>
                    </div>
                </el-form-item>
                <el-form-item label="图片" prop="pic">
                    <div style="display: flex;flex-wrap: wrap;">
                        <div v-for="(item,index) in form.picList" :key="index" class="ImgItem">
                            <el-image :src="item" :preview-src-list="form.picList" :initial-index="index" style="width: 100px; height: 100px; margin-right: 10px;" />
                            <span class="el-icon-close" @click="delImg(item, index)"></span>
                        </div>
                    </div>
                    <div :style="form.picList && form.picList.length > 0 && form.picList.length < 20 ? 'padding-top: 10px;' : ''">
                        <el-upload
                            class="upload-demo"
                            drag
                            :action="url"
                            :on-success="handleSuccess"
                            :data="{ token: $store.state.token }"
                            :headers="{ 'Access-Control-Allow-Origin': '*' }"
                            :show-file-list="false">
                            <div>
                                <i class="el-icon-upload"></i>
                                <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
                            </div>
                        </el-upload>
                    </div>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="onSubmit">{{isChange ? "修改" : "立即创建"}}</el-button>
                </el-form-item>
            </el-form>
        </div>
    </div>
</template>

<script>
import APISysLabel from "@/api/apiSysLabel";
import APIBusinessAccount from "@/api/apiBusinessAccount";

export default {
    name: "EditFollowMsg",
    components:{
    },
    props: {
        operationList: Array,
        isShow: Boolean,
    },
    watch: {
    },
    data() {
        return {
            showNumTest: 1,
            userInfo: {},
            chooseId: null,
            form: {
                followType: null,
                visitTime: new Date(),
                followContent: null,
                picList: [],
            },
            rules: {
                visitTime: [
                    { required: true, message: '请选择跟进时间', trigger: 'blur' },
                ],
                followType: [
                    { required: true, message: '请选择跟进方式', trigger: 'blur' },
                ],
                followContent: [
                    { required: true, message: '请输入跟进内容', trigger: 'blur' },
                    { min: 2, message: '长度超过 2 个字符', trigger: 'blur' },
                ],
            },
            isChange: false, // false 新增，true 修改
            followTypeList: [],
            url: "",
        };
    },
    activated() {    
        // this.url = "https://checkorder.mejour.cn/checkorder/manager/pc/user/uploadFile?token=" + this.$store.state.token
        // this.url = "http://localhost:9003/checkorder/manager/pc/user/uploadFile?token=" + this.$store.state.token
        this.url = process.env.VUE_APP_REQUSET_URL + "/checkorder/manager/pc/user/uploadFile?token=" + this.$store.state.token;
        this.userInfo = JSON.parse(localStorage.getItem("mujinguserInfo"))
        this.getSysList()
        this.isChange = false
        const businessAccountId = this.$route.query.businessAccountId;
        const followId = this.$route.query.followId;
        if(followId){
            this.isChange = true
            let row = localStorage.getItem("editBusinessAccountFollow")
            if(row){
                let msg = JSON.parse(row)
                let picList = []
                if(msg.followPic){
                    picList = msg.followPic.split(",")
                }
                this.form = {
                    followType: msg.followType,
                    visitTime: msg.visitTime,
                    followContent: msg.followContent,
                    picList: picList,
                }
            }
        }else{
            this.form = {
                followType: null,
                visitTime: new Date(),
                followContent: null,
            }
        }
    },
    created() {
    },
    methods: {
        delImg(item, index){
            this.form.picList.splice(index, 1)
        },
        handleSuccess(res, file) {
            if(res.key == 1000){
                this.form.picList.push(res.result.data)
            }
        },
        getSysList() {
            const params = {
                token: this.$store.state.token,
                sysLabelIds: "30",
            };
            APISysLabel.getSysLabelValueManageList(params).then((res) => {
                if (res.key === 1000) {
                    res = res.result;
                    if(res.data){
                        this.followTypeList = res.data[30]
                    }
                }
            });
        },
        formatterTime(time) {
            return this.$moment(time).format("YYYY-MM-DD HH:mm:ss");
        },
        onSubmit(){
            const params = this.form;
            params.businessAccountId = this.$route.query.businessAccountId
            if(this.form.picList && this.form.picList.length > 0){
                params.followPic = this.form.picList.join(",")
            }
            this.$refs["form"].validate((valid) => {
                if (valid) {
                    if(!this.isChange){
                        APIBusinessAccount.doAddFollowBusinessList(params).then((res) => {
                            if (res.key === 1000) {
                                this.$message({
                                    message: '提交成功',
                                    type: 'success'
                                });
                                this.$router.back()
                            }
                        });
                    }else{
                        params.id = this.$route.query.followId
                        APIBusinessAccount.doEditFollowBusinessList(params).then((res) => {
                            if (res.key === 1000) {
                                this.$message({
                                    message: '修改成功',
                                    type: 'success'
                                });
                                this.$router.back()
                            }
                        });
                    }
                } else {
                    console.log('error submit!!');
                    return false;
                }
            });
        },
    },
};
</script>
<style scoped>
.el-input-number{
    width: 250px !important;
}
.show_project{
    display: flex;
    justify-content: center;
    margin-top: 20px;
    width: 100%;
}
.show_project_msg{
    width: 90%;
}
.ImgItem{
    position: relative;
}
.el-icon-close {
    position: absolute;
    top: 0;
    right: 10px;
    color: #666;
    background-color: red;
}
.el-icon-close:hover {
    cursor: pointer;
}
</style>
<style lang="sass" scoped>
.order-cost-form
    background-color: white
    .cost_item_solid
        border-bottom: 1px solid #e3e3e3
    .cost_item
        width: 95%
        display: flex
        .adjustOrderItem
            margin: 20px auto
            padding-left: 40px
            display: flex
            width: 100%
            .adjustOrderItem_left
                width: 100px
                margin: 11px auto
            .adjustOrderItem_right
                width: 80%
                .show_text
                    margin: 11px auto
    .cost-footer
        padding-left: 100px
        padding-top: 50px
</style>
